import { useEffect } from 'react';

import './App.css';
import * as THREE from 'three';

function App() {
  useEffect(() => {
    // 1、创建场景
    const sence = new THREE.Scene();

    //2、创建相机
    const camera = new THREE.PerspectiveCamera(
      45, // 视角
      window.innerWidth / window.innerHeight, // 宽高比
      0.1, // 近平面
      1000 // 远平面
    );

    //3、创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight); // 设置尺寸
    document.body.appendChild(renderer.domElement); // 将渲染器添加到dom

    // 4、创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
    const cube = new THREE.Mesh(geometry, material); // 网格

    // 5、将网格添加到场景
    sence.add(cube);

    // 6、设置相机位置
    camera.position.z = 5;
    camera.lookAt(0, 0, 0);

    //7、渲染函数实现动画效果
    function animate() {
      requestAnimationFrame(animate); // 调用请求动画帧，不断请求下一帧
      // 旋转动画
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      // 渲染
      renderer.render(sence, camera); // 渲染时需要场景和相机
    }
    animate();
  }, []);

  return <div></div>;
}

export default App;
